<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 学科名称 -->
        <el-form :model="requestParameters" ref="requestParameters" label-width="80px">
          <div class="filter-container">
            <el-row type="flex">
              <el-col :span="12">
                <el-form-item label="学科名称" prop="subjectName">
                  <el-input
                    size="small"
                    style="width: 300px"
                    class="filter-item"
                    v-model="requestParameters.subjectName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item>
                  <el-button size="small" @click="clearFn">清除</el-button>
                  <el-button size="small" type="primary" @click="handleFilterFn">搜索</el-button>
                </el-form-item>
              </el-col>
              <el-col>
                <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px"
                @click="handleChange('add')"
                type="success"
                icon="el-icon-edit"
                >增加学科</el-button
              >
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert v-if="alertText !== ''" :title="alertText" type="info" :closable="false" show-icon style="margin-bottom:15px"></el-alert >
        <!-- 数据列表 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号" width="100" type="index"> </el-table-column>
          <el-table-column align="center" label="学科名称" prop="subjectName" width="250"> </el-table-column>
          <el-table-column align="center" label="创建者" width="200" prop="username"> </el-table-column>
          <el-table-column align="center" label="创建日期" width="300">
            <template slot-scope="scope">
              <span>{{ $dateFormat(scope.row.addDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="前台是否显示" width="150" prop="isFrontDisplay"> </el-table-column>
          <el-table-column align="center" label="二级目录" width="100" prop="twoLevelDirectory"> </el-table-column>
          <el-table-column align="center" label="标签" width="100" prop="tags"> </el-table-column>
          <el-table-column align="center" label="题目数量" width="100" prop="totals"> </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column align="center" label="操作" width="350" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="classifyFn(scope.row)">学科分类</el-button>
              <el-button size="mini" type="text" @click="lableFn(scope.row)">学科标签</el-button>
              <el-button size="mini" @click="handleChange(scope.row.id)" type="text">修改</el-button>
              <el-button size="mini" type="text" @click="delFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @keyup.enter="handleFilterFn"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <Dialog
          ref="editUser"
          :show-dialog.sync="showPerDialog"
          :data="formData"
          :is-edit="titleInfo"
          :origin-list="dataList"
          @comfirmEV="comfirmFn"
        ></Dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, detail, add, update, remove } from '@/api/hmmm/subjects.js'
import Dialog from './../components/subjects-add.vue'
export default {
  name: 'subJects',
  components: {
    Dialog
  },
  data () {
    return {
      showPerDialog: false, // 控制弹框是否出现
      titleInfo: {
        pageTitle: '新增学科', // 页面标题
        text: '' // 新增、编辑文本
      },
      tableKey: 0,
      total: null,
      alertText: '',
      listLoading: true,
      dataList: [], // 存放列表详情获取到的全部数据
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      formData: {
        subjectName: '',
        isFrontDisplay: '0',
        id: ''
      }
    }
  },
  methods: {
    // 点击清除按钮清空输入框的内容
    clearFn () {
      this.$refs.requestParameters.resetFields()
    },
    // 调用接口获取列表数据
    async getListFn (params) {
      this.listLoading = true
      const { data } = await list(this.requestParameters)
      this.dataList = data.items
      const dataList = this.dataList.map(item => {
        if (item.isFrontDisplay === 1) {
          return {
            ...item,
            isFrontDisplay: '是'
          }
        } else {
          return {
            ...item,
            isFrontDisplay: '否'
          }
        }
      })
      this.dataList = dataList
      // 获取总条数
      this.total = data.counts
      this.alertText = `数据一共 ${this.total} 条`
      this.requestParameters.page = data.page
      this.requestParameters.pagesize = data.pagesize
      // console.log(this.requestParameters.pagesize)
      this.listLoading = false
    },
    // 搜索信息
    handleFilterFn () {
      this.requestParameters.page = 1
      this.getListFn(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      // console.log(this.requestParameters.pagesize)
      if (this.requestParameters.page === 1) {
        this.getListFn(this.requestParameters)
      }
      this.getListFn()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getListFn()
    },
    // 添加、编辑之后表单清空
    query () {
      this.formData = {}
    },
    // 新增用户、编辑用户
    handleChange (id) {
      // console.log(id)
      this.query()
      this.showPerDialog = true
      if (id === 'add') {
        this.titleInfo.text = '新增' // 给弹层传参
      } else {
        this.titleInfo.text = '修改' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },
    // 添加权限->接口调用(弹框点击确定了)
    async comfirmFn (dataObj) {
      // 修改的确定
      const data = {
        id: this.formData.id,
        ...dataObj
      }
      if (this.titleInfo.text === '修改') {
        const res = await update(data)
        if (res.status === 200) {
          this.$message.success('修改成功!')
        }
      } else {
        // 新增的确定
        const res = await add({ ...dataObj })
        if (res.status === 200) {
          this.$message.success('添加成功!')
        }
      }
      // 请求列表数据
      this.getListFn()
    },
    // 表单详情数据加载
    async hanldeEditForm (objeditId) {
      this.formData.id = objeditId
      const { data } = await detail({ id: objeditId })
      // 获取详情 给formData
      this.formData = data
      this.$refs.editUser.formData = data
    },
    // 点击删除
    delFn (user) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          remove({ id: user })
          // 请求列表数据
          this.getListFn()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击学科分类
    classifyFn (obj) {
      this.$router.push({
        path: 'directorys',
        query: {
          id: obj.id,
          name: obj.subjectName
        }
      })
    },
    // 点击目录的时候
    lableFn (obj) {
      this.$router.push({
        path: 'tags',
        query: {
          id: obj.id,
          name: obj.subjectName
        }
      })
    }
  },
  created () {
    var _this = this
    this.getListFn()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilterFn(this.requestParameters)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pagination {
  margin-top: 10px;
}
.pages {
  text-align: right;
}

::v-deep .app-container {
  .el-form-item__content {
    margin-left: 0px !important;
  }
  .el-table__header-wrapper {
    .el-table__header {
      width: 100% !important;
    }
  }
  .el-table__body-wrapper {
    .el-table__body {
      width: 100% !important;
    }
  }

  .el-table th {
    background-color: #fafafa;
  }
  .el-table th.is-leaf {
    border-bottom: 2px solid #e8e8e8;
  }
  .disabled td {
    background-color: #f9f9f9;
    color: #c1c1c1;
  }
  .disabled .el-button--primary,
  .disabled .el-button--danger {
    background-color: #dbdada;
    border: 1px solid #dbdada;
    color: #999;
    cursor: not-allowed;
  }
}
</style>
